<template>
  <view class="bg-white rounded-md p-4 mb-2">
    <view class="flex justify-start items-center mb-2">
      <view class="mr-2">
        <wd-img :src="post?.avatarUrl" width="45" height="45" round />
      </view>
      <view class="flex flex-col">
        <view><wd-text :text="post?.username"></wd-text></view>
        <view><wd-text :text="formatDate(post?.createdTime)"></wd-text></view>
      </view>
    </view>
    <view class="mb-2" @click="goDetailsPage(post.id)">
      <view class="mb-2">
        <wd-text :text="post?.content"></wd-text>
      </view>
      <view v-if="post?.imageUrl" class="flex gap-1">
        <view v-for="(image, index) in post?.imageUrl.split(',')" :key="index">
          <wd-img :width="110" :height="110" :src="image" />
        </view>
      </view>
    </view>
    <view class="mb-2">
      <wd-tag
        v-for="str in formatTag(post?.tag)"
        :key="str"
        custom-class="space"
        type="success"
        round
      >
        {{ str }}
      </wd-tag>
    </view>
    <wd-gap bg-color="#FFFFFF"></wd-gap>
    <wd-divider></wd-divider>
    <wd-gap bg-color="#FFFFFF"></wd-gap>
    <view class="flex justify-around items-center">
      <view>
        <wd-icon name="thumb-up" size="22px"></wd-icon>
        <text>{{ post?.likeNum }}</text>
      </view>
      <view>
        <wd-icon name="chat1" size="22px"></wd-icon>
        <text>{{ post?.commentNum }}</text>
      </view>
      <view>
        <wd-icon name="star" size="22px"></wd-icon>
        <text>{{ post?.collectNum }}</text>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { PostVO } from '@/service/post/post'
import { formatDate } from '@/utils/date'
import { formatTag } from '@/utils/string'
const { post } = defineProps<{ post: PostVO }>()

const goDetailsPage = (id: number) => {
  uni.navigateTo({
    url: `/pages-sub/details/details?id=${id}`,
  })
}
</script>

<style lang="scss" scoped>
:deep(.space) {
  margin-right: 5px !important;
}
</style>
